<template>
	<view class="lee-wrap">
		<view class="p10">
			<u--input prefixIcon="search" placeholder="请输入商品名称" border="none" shape="circle"
				:customStyle="{background:'#f5f5f5',height:'60rpx',paddingLeft:'20rpx'}"
				v-model="newParams.product_name" @input="toSearch">
			</u--input>
		</view>
		<view class="container">
			<scroll-view scroll-y scroll-with-animation class="lee-tab-view menu-scroll-view bf5"
				:scroll-top="scrollTop" :scroll-into-view="itemId">
				<view v-for="(item,index) in typeList" :key="index" class="lee-tab-item"
					:class="[current == index ? 'lee-tab-item-active' : '']"
					:style="{color:current==index?'#000':'',fontWeight:current==index?'bold':''}"
					@click.stop="swichMenu(index)">
					<text class="u-line-1">{{item.label}}</text>
				</view>
			</scroll-view>
			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
				@scrolltolower="scrolltolower" :refresher-triggered="triggered">
				<view class="page-view">
					<view class="class-item" :id="'item' + index" v-for="(item , index) in tableData" :key="index">
						<view class="card c3 mb10 cshow">
							<view class="content">
								<image :src="item.ylimg" class="image" lazy-load></image>
								<view class="content_right">
									<view class="content-name">{{item.product_name}}</view>
									<view class="content-text" style="font-size: 30rpx;font-weight: 600;">#{{ item.id }}
									</view>
									<view class="content-text"
										v-if="item.dy_product_id != '' && item.dy_product_id != null">
										商品ID：{{item.dy_product_id}}</view>
									<view class="content-text"
										v-if="item.tuan_dy_product_id != '' && item.tuan_dy_product_id != null">
										团购ID：{{item.tuan_dy_product_id}}</view>
								</view>
							</view>
							<view class="sold_start_time">售卖时间：{{item.sold_start_time}} 至 {{item.sold_end_time}}
							</view>
							<view>销量：{{ item.sales_volume }}</view>
							<!-- <view class="info">
								<view class="price">
									价格：
									<view class="actual_amount">￥{{item.sku.actual_amount}}</view>
									<view class="origin_amount">￥{{item.sku.origin_amount}}</view>
								</view>
								<view class="sales_volume">售卖数量：
									<view class="sales_num">{{item.sales_volume}}</view>
								</view>
							</view> -->
							<view class="stutasBox">
								<view class="product_spec">
									配送方式：
									<u-tag class="ml10" plain size="mini" v-for="(item, i) in item.delivery_method"
										:key="i" :text="item == '1' ? '立即配送' : '先囤后约'"></u-tag>
								</view>
								<view class="product_spec">商品规格：
									<u-tag text="套餐商品" type="success" v-if="item.product_spec == 0" plain
										size="mini"></u-tag>
									<u-tag text="单商品" type="warning" v-if="item.product_spec == 1" plain
										size="mini"></u-tag>
								</view>
							</view>
							<view class="product_spec">
								上下架状态：
								<u-tag v-if="item.sj_status != 0" :type="sj_statusList[item.sj_status].type" size="mini"
									plain :text="sj_statusList[item.sj_status].name"></u-tag>
							</view>
							<view class="product_spec">
								审核状态：
								<u-tag v-if="item.sync_status != 0" size="mini" plain
									:type="sync_statusList[item.sync_status].type"
									:text="sync_statusList[item.sync_status].name"></u-tag>
								<view class="box" style="margin-left: 40rpx;" @click="tipsShowTap(item.sync_error_text)"
									v-if="item.sync_status == 3">
									<uni-icons type="chat" size="25" color="red"></uni-icons>
								</view>
							</view>
							<u-collapse :border="false">
								<u-collapse-item title="操作" name="Docs guide" icon="setting">
									<view class="setting">
										<button size="mini" @click="edit(item)"
											v-if="current == 0 && menus.includes('product/product/edit')"
											style="background-color: #fdda34;color: #000;font-weight: 600;margin-top: 10rpx;">编辑</button>
										<button size="mini"
											v-if="current == 0 && menus.includes('product/product/dy_product_save')"
											style="background-color: #fdda34;color: #000;font-weight: 600;margin-top: 10rpx;"
											@click="tong(item)">同步抖音</button>
										<button size="mini"
											style="background-color: #fdda34;color: #000;font-weight: 600;margin-top: 10rpx;"
											@click="sxProduct(item,1)"
											v-if="(item.sj_status == 2 || current == 4) && menus.includes('product/product/set_dy_product_status')">上架</button>
										<button size="mini"
											style="background-color: #fdda34;color: #000;font-weight: 600;margin-top: 10rpx;"
											@click="sxProduct(item,2)"
											v-if="(current == 2|| item.sj_status == 1) && menus.includes('product/product/set_dy_product_status')">下架</button>
										<button size="mini" @click="deleteProduct(item)"
											v-if="(item.sj_status == 2 || item.sync_status == 0) && menus.includes('product/product/delete')"
											style="background-color: #fdda34;color: #000;font-weight: 600;margin-top: 10rpx;">删除</button>
									</view>
								</u-collapse-item>
							</u-collapse>
						</view>
					</view>
				</view>
				<view v-if="tableData.length==0" class="np f-c-c">
					<view class="iconfont icon-queshengtu cb" style="font-size: 90rpx;"></view>
					<view class="f12 cb mt20">暂无商品</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import site from '@/custom/siteroot.js';
	export default {
		data() {
			return {
				typeList: [{
						label: '全部',
						value: 0,
					},
					{
						label: '审核中',
						value: 1,
					},
					{
						label: '审核失败',
						value: 2,
					},
					{
						label: '上架中',
						value: 3,
					},
					{
						label: '下架中',
						value: 4,
					},
				],
				current: 0,
				newParams: {
					id: "",
					limit: 10,
					page: 1,
					product_name: "",
					product_type: 1001001,
					sj_status: "",
					sync_status: "",
				},
				tableData: [],
				sj_statusList: {
					'1': {
						type: 'success',
						name: '上架中',
					},
					'2': {
						type: 'error',
						name: '下架中',
					},
				},
				sync_statusList: {
					'1': {
						type: 'info',
						name: '审核中',
					},
					'2': {
						type: 'success',
						name: '审核通过',
					},
					'3': {
						type: 'error',
						name: '审核失败',
					},
				},
			}
		},
		computed: {
			...mapState({
				menus: state => state.menus,
			}),
		},
		methods: {
			// 点击左边的栏目切换
			async swichMenu(index) {
				console.log(index);
				this.newParams.page = 1;
				this.hasLoadedData = false;
				this.tableData = []
				this.current = index
				if (index == 0) {
					this.newParams.sj_status = '';
					this.newParams.sync_status = '';
					this.getlists()
				}
				if (index == 3) {
					this.newParams.sj_status = 1;
					this.newParams.sync_status = '';
					this.getlists()
				}
				if (index == 4) {
					this.newParams.sj_status = 2;
					this.newParams.sync_status = '';
					this.getlists()
				}
				if (index == 1) {
					this.newParams.sj_status = '';
					this.newParams.sync_status = 1;
					this.handleAuditList()
				}
				if (index == 2) {
					this.newParams.sj_status = '';
					this.newParams.sync_status = 3;
					this.handleAuditList()
				}
			},
			getlists() {
				uni.showLoading()
				this.beg.request({
					url: "/admin/product.Goods/index",
					method: 'POST',
					data: this.newParams,
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading()
						res.data.data.forEach((v) => {
							if (v.delivery_method != '') {
								v.delivery_method = JSON.parse(v.delivery_method)
							}
							if (v.pois != '') {
								v.pois = JSON.parse(v.pois)
							}
							if (v.apply_date != '') {
								v.apply_date = JSON.parse(v.apply_date)
							}
							if (v.description_rich_text != '') {
								v.description_rich_text = JSON.parse(v.description_rich_text)
							}
							if (v.notification != '') {
								v.notification = JSON.parse(v.notification)
							}
							if (v.image_list != '') {
								v.image_list = JSON.parse(v.image_list)
							}
							v.ylimg = site.siteimgroot + v.image_list[0]
						})
						let newData = res.data.data
						if (!this.hasLoadedData) {
							this.tableData = newData;
							this.hasLoadedData = true;
						} else {
							this.tableData = this.tableData.concat(newData);
						}
					}
				})
			},
			handleAuditList() {
				uni.showLoading()
				this.beg.request({
					url: "/index.php/admin/product.Goods/getAuditList",
					method: 'POST',
					data: this.newParams,
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading()
						res.data.data.forEach((v) => {
							if (v.delivery_method != '') {
								v.delivery_method = JSON.parse(v.delivery_method)
							}
							if (v.pois != '') {
								v.pois = JSON.parse(v.pois)
							}
							if (v.apply_date != '') {
								v.apply_date = JSON.parse(v.apply_date)
							}
							if (v.description_rich_text != '') {
								v.description_rich_text = JSON.parse(v.description_rich_text)
							}
							if (v.notification != '') {
								v.notification = JSON.parse(v.notification)
							}
							if (v.image_list != '') {
								v.image_list = JSON.parse(v.image_list)
							}
							v.ylimg = site.siteimgroot + v.image_list[0]
						})
						let newData = res.data.data
						if (!this.hasLoadedData) {
							this.tableData = newData;
							this.hasLoadedData = true;
						} else {
							this.tableData = this.tableData.concat(newData);
						}
					}
				})
			},
			tong(val) {
				uni.showModal({
					title: '提示',
					content: '确定同步抖音数据吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading()
							this.beg.request({
									url: '/admin/product.Goods/sync',
									method: 'post',
									data: {
										id: val.id,
									}
								}).then((res) => {
									if (res.code == 1) {
										setTimeout(() => {
											uni.$u.toast(res.msg)
										}, 800)
										this.hasLoadedData = false
										this.newParams.page = 1
										this.getlists()

									} else {
										uni.$u.toast(res.msg)
									}
									uni.hideLoading()
								})
								.catch(() => {
									uni.hideLoading()
								})
						}
					}
				})
			},
			sxProduct(val, status) {
				let content = ''
				if (status == 1) {
					content = '上架'
				} else {
					content = '下架'
				}
				uni.showModal({
					title: '提示',
					content: `确定${content}该产品？`,
					success: (res) => {
						if (res.confirm) {
							this.beg.request({
									url: '/admin/product.Goods/operate',
									method: 'post',
									data: {
										id: val.id,
										type: status,
									}
								})
								.then((res) => {
									if (res.code == 1) {
										setTimeout(() => {
											uni.$u.toast(res.msg)
										}, 800)
										this.hasLoadedData = false
										this.newParams.page = 1
										this.getlists()
									} else {
										uni.$u.toast(res.msg)
									}
								})
								.catch(() => {})
						}
					}
				})
			},
			deleteProduct(val) {
				uni.showModal({
					title: '提示',
					content: '确定删除该商品？',
					success: (res) => {
						if (res.confirm) {
							this.beg.request({
								url: '/admin/product.Goods/deleted',
								method: 'post',
								data: {
									id: val.id
								}
							}).then(res => {
								if (res.code == 1) {
									setTimeout(() => {
										uni.$u.toast(res.msg)
									}, 800)
									this.hasLoadedData = false
									this.newParams.page = 1
									this.getlists()
								}
							})
						}
					}
				})
			},
			scrolltolower() {
				this.newParams.page++
				this.getlists()
			},
			tipsShowTap(value) {
				uni.showModal({
					title: '审核失败',
					showCancel: false,
					content: value
				})
			},
		},
		onLoad() {
			this.getlists()
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.lee-wrap {
		height: 100%;
	}

	.lee-tab-view {
		width: 200rpx;
		height: 100%;
	}

	.lee-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.lee-tab-item-active {
		position: relative;
		font-size: 24rpx;
		font-weight: 500;
		background: #fff;
	}

	.content {
		.image {
			width: 100%;
			height: 300rpx;
			border-radius: 15rpx;
		}

		.content_right {

			.content-name {
				font-size: 28rpx;
				font-weight: 700;
			}

			.content-text {
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}
	}

	.container {
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex: 1;
		height: 100%;
	}

	.product_spec {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.setting {
		display: flex;
		align-items: center;
	}
</style>